<template>
  <div>
    <!-- 
                el-menu的属性
                default-active	当前激活菜单的 index
                background-color 背景色
                text-color 文本颜色
                active-text-color 激活的文本颜色
                unique-opened	是否只保持一个子菜单的展开
                router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
             -->
    <el-menu
      :default-active="defaultActive"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
      router
    >
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu v-for="(menu, index) in navList" :key="index" :index="''+index">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{menu.title}}</span>
        </template>
        <el-menu-item
          v-for="(item, idx) in menu.children"
          :key="idx"
          :index="item.url"
        >{{item.title}}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
// 辅助函数
import {mapGetters} from 'vuex';
export default {
  data() {
    return {
      defaultActive: "/home",
    };
  },
  computed: {
    ...mapGetters([
      'navList'
    ])
  },
  mounted() {
    this.defaultActive = this.$route.path;
  },
};
</script>

<style scoped>
.el-menu {
  min-height: 600px;
}
</style>
